<template>
  <el-dialog
    v-if="open"
    class="dia-style"
    :title="title"
    :visible.sync="open"
    width="1000px"
    :close-on-click-modal="false"
    @close="cancel"
  >
    <el-form
      ref="form"
      :model="formData"
      label-width="140px"
      label-position="left"
      style="padding: 0 10px"
      @submit.native.prevent
    >
      <!-- 基础信息部分 -->
      <div class="upload-title-box">
        <div class="upload-title">基础信息</div>
        <el-checkbox v-model="showRequired" @change="changeShow">仅展示必填信息</el-checkbox>
      </div>
      <HkForm
        ref="hkFormRef1"
        :form-labels="basicArr"
        :rules="formRules"
        :data="formData"
        :dict-list="dictList"
        :btn-hidden="true"
        label-width="140"
        label-position="left"
      />
      <div v-if="!showRequired">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="重要程度" name="1">
            <el-row :gutter="20" class="iRow">
              <el-col :span="12">
                <el-form-item label="重要程度">
                  <el-select v-model="formData.equipmentCriticalityLevel" style="width: 100%">
                    <el-option
                      v-for="item in dictList.equipmentCriticalityLevelList"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否重点关注">
                  <el-select v-model="formData.equipmentFocusLevel" style="width: 100%">
                    <el-option v-for="item in dictList.foList" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="定密信息" name="2">
            <el-row :gutter="20" class="iRow">
              <el-col :span="12">
                <el-form-item label="定密时间">
                  <el-date-picker
                    v-model="formData.equipmentSecDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="有无密级调整">
                  <el-select v-model="formData.equipmentSeclevelAdjust" style="width: 100%">
                    <el-option
                      v-for="item in dictList.equipmentSeclevelAdjustList"
                      :label="item.label"
                      value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
          <el-collapse-item title="配置信息" name="3">
            <HkForm
              ref="hkFormRef"
              :form-labels="configArr"
              :rules="formRules"
              :data="formData"
              :dict-list="dictList"
              :btn-hidden="true"
              label-width="140"
              label-position="left"
            />
          </el-collapse-item>
          <el-collapse-item title="维保信息" name="4">
            <HkForm
              ref="hkFormRef"
              :form-labels="maintenanceArr"
              :rules="formRules"
              :data="formData"
              :dict-list="dictList"
              :btn-hidden="true"
              label-width="140"
              label-position="left"
            />
          </el-collapse-item>
          <el-collapse-item title="扩展信息" name="5">
            <el-row :gutter="20" class="iRow">
              <el-col :span="24">
                <el-form-item label="备注">
                  <el-input v-model="formData.equipmentRemark" type="textarea" maxlength="250" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
        <!-- 增加表格 -->
        <AddTable ref="add_table" :table-data="tableData" :table-list="tableList" />
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import HkForm from '@/components/Hk-Form'
import { listAll, addDatas, editDatas, queryById } from '@/api/assets/removableMedia.js'
import AddTable from '../../../../components/Common/addTable.vue'

export default {
  components: { HkForm, AddTable },
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    },
    dictList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 对话框是否显示
      open: false,
      // 仅展示必填信息
      showRequired: false,
      // 折叠菜单展示的数据
      activeNames: ['1', '2', '3', '4', '5'],
      // 表单数据
      formData: {
        name: '',
        equipmentNo: '',
        equipmentType: '',
        equipmentSecretRelated: '',
        equipmentUserId: '',
        equipmentOrgId: '',
        equipmentUseStatus: '',
        equipmentStatus: '',
        equipmentScopeofuse: '',
        equipmentSecLevel: '',
        equipmentCriticalityLevel: '',
        equipmentFocusLevel: '',
        equipmentClassificationTime: '',
        equipmentSeclevelAdjust: '',
        Mmanufacturer: '',
        equipmentBrand: '',
        equipmentModel: '',
        equipmentSn: '',
        equipmentPid: '',
        equipmentCapacity: '',
        equipmentPurpose: '',
        equipmentStorage: '',
        equipmentPurchaseTime: '',
        equipmentEnableTime: '',
        equipmentOverdueTime: '',
        equipmentMaintenanceName: '',
        equipmentManufacturerMobile: '',
        equipmentManufacturerRecord: '',
        equipmentRemark: ''
      },
      // 基础信息
      basicArr: [
        {
          label: '设备名称',
          field: 'name',
          type: 'input'
        },
        {
          label: '设备编号',
          field: 'equipmentNo',
          type: 'input',
          hidden: false
        },
        {
          label: '设备类型',
          field: 'equipmentType',
          type: 'select',
          list: 'equipmentTypeList'
        },
        {
          label: '是否涉密专用设备',
          field: 'equipmentSecretRelated',
          type: 'select',
          list: 'foList'
        },
        {
          label: '责任人',
          field: 'equipmentUserId',
          type: 'cascader',
          list: 'equipmentUserIdList',
          props: {
            children: 'children',
            label: 'label'
          }
        },
        {
          label: ' 责任部门',
          field: 'equipmentOrgId',
          type: 'cascader',
          list: 'equipmentOrgIdList',
          props: {
            children: 'children',
            label: 'label'
          }
        },
        {
          label: '使用状态',
          field: 'equipmentUseStatus',
          type: 'select',
          list: 'equipmentUseStatusList'
        },
        {
          label: '设备状态',
          field: 'equipmentStatus',
          type: 'select',
          list: 'equipmentStatusList'
        },
        {
          label: '使用范围',
          field: 'equipmentScopeofuse',
          type: 'select',
          list: 'equipmentScopeofuseList',
          hidden: false
        },
        {
          label: '涉密等级',
          field: 'equipmentSecLevel',
          type: 'select',
          list: 'equipmentSecLevelList'
        }
      ],
      // 配置信息
      configArr: [
        {
          label: '厂商',
          field: 'Mmanufacturer',
          type: 'input'
        },
        {
          label: '品牌',
          field: 'equipmentBrand',
          type: 'input'
        },
        {
          label: '型号',
          field: 'equipmentModel',
          type: 'input'
        },
        {
          label: '设备序列号',
          field: 'equipmentSn',
          type: 'input'
        },
        {
          label: 'PID&VID',
          field: 'equipmentPid',
          type: 'input'
        },
        {
          label: '容量描述',
          field: 'equipmentCapacity',
          type: 'input'
        },
        {
          label: '用途说明',
          field: 'equipmentPurpose',
          type: 'select',
          list: 'equipmentPurposeList'
        },
        {
          label: '存放位置',
          field: 'equipmentStorage',
          type: 'input'
        }
      ],
      // 维保信息
      maintenanceArr: [
        {
          label: '介质购置时间',
          field: 'equipmentPurchaseTime',
          type: 'datePicker',
          format: 'yyyy-MM-dd'
        },
        {
          label: '介质启用时间',
          field: 'equipmentEnableTime',
          type: 'datePicker',
          format: 'yyyy-MM-dd'
        },
        {
          label: '过保日期',
          field: 'equipmentOverdueTime',
          type: 'datePicker',
          format: 'yyyy-MM-dd'
        },
        {
          label: '维保厂家名称',
          field: 'equipmentMaintenanceName',
          type: 'input'
        },
        {
          label: '维保厂家电话',
          field: 'equipmentManufacturerMobile',
          type: 'input'
        },
        {
          label: '维保记录',
          field: 'equipmentManufacturerRecord',
          type: 'input'
        }
      ],
      // 表单校验
      formRules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        equipmentType: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentSecretRelated: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentUserId: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentOrgId: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentUseStatus: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentStatus: [{ required: true, message: '不能为空', trigger: 'change' }],
        equipmentSecLevel: [{ required: true, message: '不能为空', trigger: 'change' }]
      },

      // 表格展示的数据
      tableData: [],
      // 表格列表的结构
      tableList: [
        { label: 'IP地址', param: 'equipmentUserId', type: 'input' },
        { label: 'MAC', param: 'equipmentOrgId', type: 'input' }
      ]
    }
  },
  computed: {},
  watch: {},

  mounted() {},
  methods: {
    // 是否只展示必填项
    changeShow() {
      this.basicArr.forEach((item) => {
        if (typeof item.hidden === 'boolean') {
          item.hidden = this.showRequired
        }
      })
    },
    // 清空表单
    resetFields() {
      this.$refs['form'].resetFields()
      this.$refs['hkFormRef1']?.resetForm('formLabels')
      this.$refs['hkFormRef']?.resetForm('formLabels')
    },
    show(id) {
      this.showRequired = true
      this.changeShow()
      return new Promise((resolve, reject) => {
        if (id) {
          queryById(id).then((res) => {
            this.formData = res
          })
        }
        resolve(this.formData)
      }).then((res) => {
        this.open = true
      })
    },
    // 提交事件
    async submitForm() {
      const res = await this.$refs.add_table.submitTable()
      // let res = await this.$refs.hkFormRef1.handleFormSubmit("formLabels");
      if (this.title == '添加') {
        /* addDatas(this.formData).then((res) => {
          this.$message.success("新增成功");
          this.open = false;
          this.$emit("handleAdd");
        });*/
      } else {
        editDatas(this.formData).then((res) => {
          this.$message.success('修改成功')
          this.open = false
          this.$emit('handleAdd')
        })
      }
    },
    // 关闭按钮
    cancel() {
      this.open = false
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-title-box {
  height: 60px;
  width: 100%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba($color: #000000, $alpha: 8%);
  .upload-title {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
  }
}
::v-deep {
  .el-collapse-item {
    border-bottom: 1px solid #e6ebf5;
    .el-collapse-item__wrap {
      border-bottom: none;
    }
    .el-collapse-item__content {
      padding-bottom: 0px;
    }
  }
  .iRow {
    margin: 0 !important ;
  }
  .el-dialog__body {
    display: flex;
    flex-direction: column;
  }
  .el-collapse {
    border-top: none;
    .el-collapse-item__header {
      height: 60px;
      font-size: 16px;
      font-weight: 700;
      color: #000000;
      margin-left: 30px;
      border-bottom: none;
    }
    .el-collapse-item__arrow {
      margin: 0 auto 0 10px;
      margin-left: -90px;
    }
  }
}
</style>
